import React from "react";
import { observer } from "mobx-react";
import { observable } from "mobx";
import { IMainMenu } from '@/models/IMainMenu';
import Link from "umi/link";
import { Menu, Icon } from 'antd';
import { Utility } from '@/utils/Utility';

export class MenuItemC extends React.Component<IMenuItemProps> {

    render() {
        const disableLink = Utility.isTrue(this.props.disableLink)
        if (disableLink) {
            return <a onClick={() => this.props.onClick?.(this.props.menu)}>
                {this.props.menu.icon && <Icon type={this.props.menu.icon} />}
                <span>{this.props.menu.name}</span>
            </a>
        }
        return <Link to={this.props.menu.url ?? ""} onClick={() => this.props.onClick?.(this.props.menu)}>
            {this.props.menu.icon && <Icon type={this.props.menu.icon} />}
            <span>{this.props.menu.name}</span>
        </Link>
    }

}

export interface IMenuItemProps {
    menu: IMainMenu
    disableLink?: boolean

    onClick?: (menu: IMainMenu) => void
}